<template>
    <div>
        <div class="handle-box">
            <el-input placeholder="请输入搜索的内容" @input="searchNews" v-model="content" class="handle-input mr10"></el-input>
            <el-button type="primary" @click="searchNews" :icon="Search">搜索</el-button>
            <!-- <el-button type="primary" :icon="Plus">新增</el-button> -->
        </div>
        <div v-if="tableData.length == 0">没有该关键字的搜索结果</div>
        <el-table v-if="tableData" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column type="index" width="50" />
            <el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
            <el-table-column prop="digest" label="新闻简述"></el-table-column>
            <el-table-column prop="source" label="新闻来源"></el-table-column>

            <el-table-column prop="create_time" label="注册时间"></el-table-column>
            <el-table-column label="操作" width="220" align="center">
                <template #default="scope">
                    <el-button text :icon="Edit" v-permiss="15"> 编辑 </el-button>
                    <el-button text :icon="Delete" @click="deleteNews(scope.row.id)" class="red" v-permiss="16"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination background v-model:current-page="currentPage" @click="seePage(currentPage)" @prev-click="prevPage" @next-click="nextPage" layout="prev, pager, next" :total="total" />
    </div>
</template>

<script setup name="basetable">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import moment from "moment";

// 对接后台数据接口
import { newsDetailPaging, delNews, deleteBanner, searchBanner, newsDetailTotal, newsSearch, newsSearchPaging } from "../api/index";
// 导入创建路由方法
import { useRouter } from "vue-router";
// 定义路由
const $router = useRouter();
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const content = ref("");
const flat = ref(true);
const getData = () => {
    // page_num, page_size
    newsDetailPaging({ page_num: currentPage.value, page_size: 10 })
        .then((content) => {
            console.log("1111->", content);
            let { msg, code, result } = content;
            if (code == 200) {
                // 整合数据
                let arr = result.map((item) => {
                    item.create_time = moment(item.create_time).format("YYYY-MM-DD hh:mm:ss");
                    return item;
                });
                tableData.value = arr;

                console.log(result);
            }
        })
        .then(() => {
            newsDetailTotal().then((data) => {
                // total.value = Math.ceil(data.rows[0]["count(*)"] / 10);
                total.value = data.rows[0]["count(*)"];
                console.log(total.value);
            });
        });
};
const nextPage = () => {
    console.log(currentPage.value);
    if (content.value == "") {
        getData();
    } else {
        console.log(currentPage.value, content.value);

        newsSearchPaging({ page_num: currentPage.value, page_size: 10, content: content.value }).then((data) => {
            tableData.value = data.result;
            console.log(data);
        });
    }
};
const prevPage = () => {
    console.log(currentPage.value);
    if (content.value == "") {
        getData();
    } else {
        console.log(currentPage.value, content.value);
        newsSearchPaging({ page_num: currentPage.value, page_size: 10, content: content.value }).then((data) => {
            tableData.value = data.result;
            console.log(data);
        });
    }
};
getData();
const deleteNews = (x) => {
    console.log(x);

    ElMessageBox.confirm("确定要删除吗？", "提示", { type: "warning" })
        .then(() => {
            console.log(tableData.value);
            if (content.value == "") {
                tableData.value = tableData.value.filter((item) => {
                    return item.id != x;
                });
                delNews({ id: x }).then((data) => {
                    console.log(data);
                    ElMessage.success("删除成功");

                    getData();
                });
            } else {
                tableData.value = tableData.value.filter((item) => {
                    return item.id != x;
                });
                newsSearchPaging({ page_num: currentPage.value, page_size: 10, content: content.value }).then((data) => {
                    tableData.value = data.result;
                    ElMessage.success("删除成功");

                    console.log(data);
                });
            }
        })
        .catch(() => {
            console.log(22);
        });
};
const searchNews = () => {
    console.log(content.value);
    if (content.value == "") {
        getData();
    } else {
        newsSearch({ content: content.value }).then((data) => {
            if (data.code == 200) {
                console.log(data.rows);
                tableData.value = data.rows;
                tableData.value = data.rows.map((item) => {
                    item.create_time = moment(item.create_time).format("YYYY-MM-DD hh:mm:ss");
                    return item;
                });
                total.value = data.rows.length;
            }
        });
    }
};
const seePage = (x) => {
    if (content.value != "") {
        newsSearchPaging({ page_num: currentPage.value, page_size: 10, content: content.value }).then((data) => {
            tableData.value = data.result;
            tableData.value = tableData.value.map((item) => {
                item.create_time = moment(item.create_time).format("YYYY-MM-DD hh:mm:ss");
                return item;
            });
            console.log(data);
        });
    } else {
        getData();
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #f56c6c;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
